<div fxFlexFill fxLayout="row" class="detail-content">
  <aside fxFlex="15%" fxLayout="column" class="turbine-detail">
    <div class="bg detail-flex detail-column">
      <div class="turbine-detail-farm" [ngStyle]="{background: this.currentStatus?.statusColor}">
        <!--[ngStyle]="{background: this.currentStatus?.statusColor}"-->
        <div class="title" (mouseleave)="onMouseLeave($event)" (mouseenter)="onMouseEnter()">
          <span class="farmName">{{currentInverter?.farmName}}{{currentInverter?.deviceName}}</span>
          <!--状态  -->
          <em></em>

          <!--逆变器选择  -->
          <div class="turbine-selector-show" [hidden]="!showSelector">
            <app-device-selector [selectedDeviceId]="deviceId" [selectedFarmId]="farmId" [multipleDevice]="false" [display]="true" [farmCategory]="farmCategory"
                                 [deviceCategories]="deviceCategories" (selectedDevicesChange)="onSelectFarmRadio($event)">
            </app-device-selector>
          </div>
        </div>

        <div class="turbine-title-model">
          <i></i>
          <span>{{currentStatus?.statusName}}</span>
        </div>
      </div>
      <div class="turbine-detail-formInfo turbine-statu detail-flex-full">
        <p>型号名称
          <span>{{ model?.modelName }}</span>
        </p>
        <p>厂家
          <span>{{ model?.factoryName }}</span>
        </p>
        <p *ngFor="let item of modelParams">{{ item?.modelParamName }}
          <span>{{item?.modelParamNameValue}}</span>
        </p>
      </div>
    </div>
  </aside>
  <section fxFlex="85%" class="detail-main">
    <div fxFlexFill class="detail-flex detail-column">
      <header class="detail-main-header" align="center">
        <div class="convergence">
          <app-convergencebox-view [device]="currentInverter">
          </app-convergencebox-view>
        </div>
      </header>
      <section class="detail-main-content detail-flex-full detail-flex detail-column">
        <header class="system-tab">
          <span #titleShow *ngFor="let item of total;let i=index" [ngClass]="{on:n===i,hide:item.data.length==0}" (mouseenter)="onMouseTitleEnter(i,item?.img)"
                (mouseleave)="onMouseTitleLeave(i,item?.img)">
            <b>
              <img fxFlexFill *ngIf="item?.img?.icon" [src]="localhostPath+'/assets/images/' + item?.img?.icon" alt="">
              <!-- <em fxFlexFill *ngIf="item?.img?.icon" [ngStyle]="{'background': 'url(assets/images/' + item?.img?.icon + ') no-repeat center'}"> -->
              <!-- </em> -->
            </b>
            <i>{{item?.title}}</i>
            <div class="mouseenter-show" [hidden]="n!==i">
              <app-inverter-detail-system [switchingValue1]='switchingValue1' [switchingValue2]='switchingValue2' [data]="item?.data" [title]="item?.title" [image]="item?.img">
              </app-inverter-detail-system>
            </div>
          </span>
        </header>
        <div class="detail-information detail-flex-full detail-flex">
          <section class="basic-information detail-flex detail-column">
            <header>
              逆变器信息
            </header>
            <section class="basic">
              <div>
                <span *ngFor="let item of basicData;let i=index">
                  <i *ngIf="item?.tagKind==='2'" Class='green' [ngStyle]='{background:item?.value==1?switchingValue1:switchingValue2}'></i>
                  <i [title]="item?.value | number:'1.1-2'" *ngIf="item?.tagKind=='1'">{{item?.value | number:'1.1-2'}}</i>
                  <em [title]="item?.tagName+''+item.tagUnit">{{item?.tagName}}{{item?.tagUnit}}</em>
                </span>
              </div>

            </section>
          </section>
          <section class="wind-power detail-flex detail-column">
            <section class="detail-flex-full detail-flex detail-column">
              <header>逆变器状态</header>
              <section class="scroll-wind-power">
                <table>
                  <thead>
                  <th>信息状态</th>
                  <th>时间</th>
                  </thead>
                  <tbody>
                  <tr *ngFor="let item of inverterStatuses;let i=index">
                    <td>{{item.statusName}}</td>
                    <td>{{item.time | date :"y-MM-dd HH:mm:ss"}}</td>
                  </tr>
                  </tbody>
                </table>
              </section>
            </section>
          </section>
          <!--报警信息  -->
          <section class="fault-message detail-flex detail-column">
            <app-inverter-alarm-list class="full"></app-inverter-alarm-list>
          </section>
        </div>
      </section>
    </div>
  </section>
</div>
